<template>
  <div class="lotteryReusult">
      <header>
          <ul>
                <li v-for="item in lotteryArr" :class="{'navActive':lottery_type==item.id}" @click="changeLott(item.id)">{{item.name}}</li>
          </ul>
      </header>
      <div class="zsPanel w-1200">
            <div class="zsHead">
                <div class="zsName">{{lottActive.name}}</div>
                <div class="colorLine"></div>
                <div class="zsNav">
                    <div :class="{'typeActive':jgActive}" @click="changeView(true)">开奖结果</div>
                    <div :class="{'typeActive':!jgActive}" @click="changeView(false)">开奖走势</div>
                </div>
                <div class="picPanel">
                    <DatePicker type="date" :options="startOption" placeholder="日期筛选" class="datePck" @on-change="setCkedDate"></DatePicker>
                    <DatePicker type="date" placeholder="日期筛选" autocomplete="off" hidden></DatePicker>
                    <Button type="error" class="schBtn" @click="changePage(undefined)">搜索</Button>
                </div>
            </div>
            <div class="loadingBox" v-if="loading">
                <Spin fix></Spin>
            </div>
            <Table border :columns="xyColumns1" :data="tableData" class="jgTable" v-else-if="jgActive"></Table>
            <Table border :columns="xyColumns2" :data="tableData" class="jgTable" id="canvasPanel" v-else></Table>
            <Page :total="totalPage" :styles="pageStyle" @on-change="changePage"></Page>
      </div>
  </div>
</template>
<script>
import {fetchJson} from "@/common/js/request";
import _ from 'lodash';
export default {
    beforeCreate(){
        this.$Spin.hide()
    },
    data(){
        return{
            loading: true,
            jgActive: true,
            lottActive: {},
            lottery_type: 1,
            totalPage: 0,
            pageActive: 1,
            checkedDate: undefined,
            lotteryArr: [{
                "id": 1,
                "name": "幸运28",
            }, {
                "id": 3,
                "name": "加拿大28",
            },{
                "id": 2,
                "name": "北京PK10",
            }, {
                "id": 4,
                "name": "幸运飞艇",
            },{
                "id": 9,
                "name": "急速赛车",
            }, {
                "id": 7,
                "name": "香港六合彩",
            }, {
                "id": 8,
                "name": "急速六合彩",
            }, {
                "id": 5,
                "name": "重庆时时彩",
            }, {
                "id": 6,
                "name": "三分彩",
            }, {
                "id": 10,
                "name": "百人牛牛",
            }, {
                "id": 11,
                "name": "分分彩",
            }],
            pageStyle:{'text-align': 'right'},
            tableData:[],
            redBoxStyle: {borderRadius: '50%',backgroundColor: '#dc1716',color: 'white',width: '30px',height: '30px',display: 'inline-block',lineHeight: '30px'},
            fhBoxStyle: {margin: '0px 5px'},
            startOption: {
                disabledDate (date) {
                    return date && date.valueOf() > Date.now() - 86400000
                }
            },
            xyColumns1:[
                {
                    title: '时间',
                    key: 'time',
                    align: 'center',
                    width: 160
                },
                {
                    title: '期数',
                    key: 'issue',
                    align: 'center',
                    width: 100                    
                },
                {
                    title: '开奖号码',
                    key: 'rstNum',
                    align: 'center',
                    width: 250,
                    render: (h,params)=>{
                        return h('div',[
                            h('span', {
                                style: this.redBoxStyle,
                            }, params.row.lottery_numbers.split(',')[0]),
                            h('span', {
                                style: this.fhBoxStyle,
                            }, '+'),
                            h('span', {
                                style: this.redBoxStyle,
                            }, params.row.lottery_numbers.split(',')[1]),
                            h('span', {
                                style: this.fhBoxStyle,
                            }, '+'),
                            h('span', {
                                style: this.redBoxStyle,
                            }, params.row.lottery_numbers.split(',')[2]),
                            h('span', {
                                style: this.fhBoxStyle,
                            }, '='),
                            h('span', {
                                style: this.redBoxStyle,
                                class: 'xyColorBox'+params.row.lottery_numbers.split(',')[3]
                            }, params.row.lottery_numbers.split(',')[3]),
                        ])
                    }               
                },
                {
                    title: '总和',
                    align: 'center',
                    children: [
                        {
                            title: '和值',
                            key: 'heZhi',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#e60012'},
                                },params.row.heZhi)
                            }
                        },
                        {
                            title: '大',
                            key: 'da',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#e68200'},
                                },params.row.da)
                            }
                        },
                        {
                            title: '小',
                            key: 'xiao',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#3487ea'},
                                },params.row.xiao)
                            }
                        },
                        {
                            title: '单',
                            key: 'dan',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#f13790'},
                                },params.row.dan)
                            }
                        },
                        {
                            title: '双',
                            key: 'shuang',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#0072e3'},
                                },params.row.shuang)
                            }
                        },
                    ]
                },
                {
                    title: '组合',
                    align: 'center',
                    children: [
                        {
                            title: '大单',
                            key: 'daDan',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#e68200'},
                                },params.row.daDan)
                            }
                        },
                        {
                            title: '大双',
                            key: 'daShuang',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#3487ea'},
                                },params.row.daShuang)
                            }
                        },
                        {
                            title: '小单',
                            key: 'xiaoDan',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#e68200'},
                                },params.row.xiaoDan)
                            }
                        },
                        {
                            title: '小双',
                            key: 'xiaoShuang',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#3487ea'},
                                },params.row.xiaoShuang)
                            }
                        },
                    ]
                },
                {
                    title: '极值',
                    align: 'center',
                    children: [
                        {
                            title: '极大',
                            key: 'jiDa',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#e68200'},
                                },params.row.jiDa)
                            }
                        },
                        {
                            title: '极小',
                            key: 'jiXiao',
                            align: 'center',
                            render: (h,params)=>{
                                return h('span',{
                                    style:{color: '#3487ea'},
                                },params.row.jiXiao)
                            }
                        }
                    ]
                },
            ],
            xyColumns2: [
                {
                    title: '期号',
                    key: 'issue',
                    align: 'center',
                    width: 80
                },
                {
                    title: '号码分布',
                    align: 'center',
                    children: [
                        {
                            title: '00',
                            key: 'boxVal',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                    id: 'numBox'+params.index
                                },value)
                            }
                        },
                        {
                            title: '01',
                            key: 'yi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                                
                            }
                        },
                        {
                            title: '02',
                            key: 'er',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '03',
                            key: 'san',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                    return h('span',{
                                        id: 'numBox'+params.index,
                                        class: className,
                                        ref: 'numBox'+params.index
                                    },value)
                                }
                            }
                        },
                        {
                            title: '04',
                            key: 'si',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '05',
                            key: 'wu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '06',
                            key: 'liu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '07',
                            key: 'qi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '08',
                            key: 'ba',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '09',
                            key: 'jiu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '10',
                            key: 'shi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '11',
                            key: 'shiyi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '12',
                            key: 'shier',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '13',
                            key: 'shisan',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '14',
                            key: 'shisi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '15',
                            key: 'shiwu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '16',
                            key: 'shiliu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '17',
                            key: 'shiqi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '18',
                            key: 'shiba',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '19',
                            key: 'shijiu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '20',
                            key: 'ershi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '21',
                            key: 'eryi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '22',
                            key: 'erer',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '23',
                            key: 'ersan',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '24',
                            key: 'ersi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '25',
                            key: 'erwu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '26',
                            key: 'erliu',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                        {
                            title: '27',
                            key: 'erqi',
                            align: 'center',
                            render: (h,params)=>{
                                var value = ''
                                var className = []
                                if(params.column.title==params.row.boxVal){
                                    value=params.column.title
                                    className=['xyColorBox'+params.row.boxVal,'qiu28']
                                }
                                return h('span',{
                                    class: className,
                                },value)
                            }
                        },
                    ],
                },
                {
                    title: '大小',
                    key: 'daXiao',
                    align: 'center',
                    children: [
                        {
                            title: '大',
                            key: 'da',
                            align: 'center',
                        },
                        {
                            title: '小',
                            key: 'da',
                            align: 'center',
                        },
                    ],
                },
                {
                    title: '单双',
                    key: 'danShuang',
                    align: 'center',
                    children: [
                        {
                            title: '单',
                            key: 'dan',
                            align: 'center',
                        },
                        {
                            title: '双',
                            key: 'shuang',
                            align: 'center',
                        },
                    ],
                },
                {
                    title: '极值',
                    align: 'center',
                    children: [
                        {
                            title: '极大',
                            key: 'jiDa',
                            align: 'center',
                        },
                        {
                            title: '极小',
                            key: 'jiXiao',
                            align: 'center',
                        }
                    ]
                },
            ],
        }
    },
    components:{},
    created(){},
    mounted(){        
        this.getHistory()
    },
    computed: {},
    methods:{
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y,M,D,h,m
            Y = date.getFullYear() + '-';
            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes();
            return Y+M+D+h+m;
        },
        changeView: function(flag){
            if(flag){
                this.getHistory()
                this.jgActive=true
            }else{
                this.getTrend()
                this.jgActive=false
            }
        },
        changeLott: function(id){
            var chartBox = document.getElementById('canvasPanel')//canvas容器            
            chartBox.removeChild('canvas')
            this.lottery_type=id
            for(var i=0;i<this.lotteryArr.length;i++){
                if(this.lotteryArr[i].id == this.lottery_type){
                    this.lottActive = this.lotteryArr[i]
                    break
                }
            }
            if(this.jgActive){
                this.getHistory()
            }else{
                this.getTrend()
            }
            
        },
        setCkedDate: function(date){
            this.checkedDate=date
        },
        changePage: function(page){
            //page是第几页 不传的时候为一
            var chartBox = document.getElementById('canvasPanel')//canvas容器            
            chartBox.removeChild('canvas')
            if(this.jgActive){
                this.getHistory(page)
            }else{
                this.getTrend(page)
            }
        },
        getTrend(page){
            this.loading=true
            page = page?page:1
            //获取开奖走势
            fetchJson(this, "?m=api&c=trend&a=trendChart", {
            lottery_type: this.lottery_type,
            page: page,
            day: this.checkedDate?this.checkedDate:'',
            }).then(result => {
                this.loading=false
                if(_.isEmpty(result.lottery)){
                    return
                }
                var data = result.lottery
                this.totalPage = result.totalPage*10
                var newArr = []
                for(var i=0;i<data.length;i++){
                    let content = data[i].content
                    newArr.push(
                        {
                            issue: data[i].issue,
                            boxVal: content[0],
                            da: content[1],
                            xiao: content[2],
                            dan: content[3],
                            shuang: content[4],
                            daDan: content[5],
                            daShuang: content[6],
                            xiaoDan: content[7],
                            xiaoShuang: content[8],
                            jiDa: content[9],
                            jiXiao: content[10],
                        }
                    )
                }
                this.tableData = newArr
                var that = this
                setTimeout(function(){
                    that.chartLine()
                },200)
            });
        },
        getHistory: function(page){
            this.loading=true
            page = page?page:1
            //获取开奖历史
            fetchJson(this, "?m=api&c=trend&a=getMoreLottery", {
            lottery_type: this.lottery_type,
            page: page,
            day: this.checkedDate?this.checkedDate:'',
            }).then(result => {
                this.loading=false
                if(_.isEmpty(result.data)){
                    return
                }
                var data = result.data
                this.totalPage = data.totalPage*10
                var newArr = []
                for(var i=0;i<data.list.length;i++){
                    let content = data.list[i].content
                    newArr.push(
                        {
                            time: this.timestampToTime(data.list[i].lottery_date),
                            lottery_numbers: data.list[i].lottery_numbers,
                            issue: data.list[i].lottery_id,
                            heZhi: content[0],
                            da: content[1],
                            xiao: content[2],
                            dan: content[3],
                            shuang: content[4],
                            daDan: content[5],
                            daShuang: content[6],
                            xiaoDan: content[7],
                            xiaoShuang: content[8],
                            jiDa: content[9],
                            jiXiao: content[10],
                        }
                    )
                }
                this.tableData = newArr
            });
        },
        chartLine: function(){
            var chartBox = document.getElementById('canvasPanel')//canvas容器
            let cbLeftOfst = chartBox.getBoundingClientRect().left//容器坐标
            let cbTopOfst = chartBox.getBoundingClientRect().top//容器坐标
            var numBox = document.getElementsByClassName('qiu28')
            var newArr =[]
            for(var i=0;i<numBox.length;i++){
                newArr.push(numBox[i])
            }
            for(var i=0;i<newArr.length;i++){
                if(i+1==newArr.length){
                    return
                }
                let boxHeight = newArr[i].clientHeight//球宽高
                let boxWidth = newArr[i].clientWidth
                let boxLeftOfst = newArr[i].getBoundingClientRect().left - cbLeftOfst//球坐标 i+1即下个球
                let boxLeftOfst1 = newArr[i+1].getBoundingClientRect().left - cbLeftOfst
                let boxTopOfst = newArr[i].getBoundingClientRect().top - cbTopOfst
                let boxTopOfst1 = newArr[i+1].getBoundingClientRect().top - cbTopOfst
                var cvs = document.createElement("canvas")
                let cvsWidth = Math.max(boxLeftOfst1, boxLeftOfst) - Math.min(boxLeftOfst1, boxLeftOfst)
                cvs.width = cvsWidth==0? Math.min(boxLeftOfst1, boxLeftOfst): cvsWidth//canvas宽度 cvsWidth==0时即为竖线
                cvs.height = Math.max(boxTopOfst1, boxTopOfst) - Math.min(boxTopOfst1, boxTopOfst)
                cvs.style.top = Math.min(boxTopOfst1, boxTopOfst) + parseInt(boxHeight / 2) + "px"
                cvs.style.left = Math.min(boxLeftOfst1, boxLeftOfst) + parseInt(boxWidth / 2) + "px"
                cvs.style.position = "absolute"
                var cxt = cvs.getContext("2d")
                cxt.save()
                cxt.strokeStyle = 'red'
                cxt.lineWidth = 1
                cxt.lineJoin = "round"
                cxt.beginPath()
                if(boxLeftOfst1<boxLeftOfst){
                    cxt.moveTo(cvs.width, 0)
                    cxt.lineTo(0, cvs.height)
                }else if(boxLeftOfst1==boxLeftOfst){
                    cxt.moveTo(0, 0)
                    cxt.lineTo(0, cvs.height)
                }else{
                    cxt.moveTo(0, 0)
                    cxt.lineTo(cvs.width, cvs.height)
                }
                cxt.closePath()
                cxt.stroke()
                cxt.restore()
                chartBox.appendChild(cvs)
            }
        }
    },
    watch:{},
    beforeDestroy() {}
}
</script>
<style scoped>
    .lotteryReusult{
        /* background: url(../../../assets/images/about-content-bg.jpg)no-repeat; */
        background-size: 100% 100%;min-height: 700px;}
    .lotteryReusult>header{width: 100%;height:48px;background:rgba(0,0,0,0.2);}
    .lotteryReusult>header>ul{width: 1220px;margin: 0 auto;}
    .lotteryReusult>header>ul>li{display: inline-block;line-height: 48px;font-size:14px;color: #E5D288;margin-left: 25px;cursor: pointer}
    .lotteryReusult li:hover{color: white;}
    .loadingBox{height: 500px;position: relative}
    .zsPanel{margin-top: 15px;padding: 20px;min-height: 580px;background-color: #ffffff;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);position: relative;}
    .zsHead{overflow: auto;}
    .zsName{font-size: 21px;float: left;}
    .colorLine{
        content: "";position: absolute;width: 1160px;height: 4px;top: 60px;left: 20px;
        /* background: url(../../../assets/images/colorline.png) no-repeat;background-size: 100% 100%; */
    }
    .zsNav{border: 1px solid #F3596A;border-radius: 3px;float: left;width: 176px;cursor: pointer;margin-left: 50px;height: 24px;line-height: 22px;margin-top: 5px;}
    .zsNav>div{float: left;width: 50%;text-align: center;height: 100%;}
    .zsNav>div:first-child{border-right: 1px solid #F3596A}
    .datePck{width: 200px;}
    .picPanel{float: right;}
    .picPanel button{width: 80px;margin-left: 20px;}
    .jgTable{margin: 20px 0px}
    .typeActive{background: #F3596A;color: white;}
    .navActive{color: white !important}
</style>
<style>
    .jgTable .ivu-table{font-size: 14px;}
    .jgTable .ivu-table-cell{padding: 0px;}
    .jgTable .ivu-table td,.jgTable .ivu-table th{height: 38px;}
    .jgTable .testClass{font-size: 21px}
    .qiu28{border-radius: 50%;color: white;background-color: rgb(220, 23, 22);width: 24px;height: 24px;line-height: 24px;display: inline-block}
    .xyColorBox3,.xyColorBox6,.xyColorBox9,.xyColorBox12,.xyColorBox15,.xyColorBox18,.xyColorBox21,.xyColorBox24{background-color: #FF382C !important}
    .xyColorBox2,.xyColorBox5,.xyColorBox8,.xyColorBox11,.xyColorBox17,.xyColorBox20,.xyColorBox23,.xyColorBox26{background-color: #008CF7 !important}
    .xyColorBox1,.xyColorBox4,.xyColorBox7,.xyColorBox10,.xyColorBox16,.xyColorBox19,.xyColorBox22,.xyColorBox25{background-color: #00A751 !important}
</style>



// WEBPACK FOOTER //
// src/components/room/lotteryReusult/lotteryReusult.vue